<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		/*订单头部*/
		.sta-box{width: 100%;height: 100px;flex-direction: column;justify-content: center;background:#FF9502;padding-left: 15px;box-sizing:border-box;position: relative;}
		.sta-box .t1{font-size: 16px;color: #FFFFFF;font-weight: 500;}
		.sta-box .t2{font-size: 13px;color: #FFFFFF;font-weight: 500;padding-top: 6px;box-sizing: border-box;}
		.sta-box .sta-img{width: 56px;height: 56px;position: absolute;top: 22px;right: 20px;}
		.sta-box .sta-img img{width: 100%;height: 100%;}

		/*物流信息*/
		.wuliu-box{width: 100%;background: #FFFFFF;padding: 20px 0;box-sizing: border-box;}
		.wuliu-box .img-box{padding: 0 15px;align-items: center;justify-content: center;flex-shrink: 0;}
		.wuliu-box .img-box img{width: 22px;height:22px;}
		.wuliu-box .wuliu-info{align-items: center;}
		.wuliu-box .wuliu-info .text{font-size: 14px;color: #333333;}
		.wuliu-box .wuliu-info .time{box-sizing: border-box;font-size: 13px;color: #666666;padding-top: 6px;}
		.wuliu-box .img2-box{width: 43px;flex-shrink: 0;align-items: center;justify-content: center;}
		.wuliu-box .img2-box img{width: 13px;height: 13px;}

		/*地址信息*/
		.addr-box{width: 100%;background: #FFFFFF;margin-bottom: 10px;padding: 20px 0;box-sizing: border-box;}
		.addr-box .img-box{padding: 0 15px;align-items: center;justify-content: center;}
		.addr-box .img-box img{width: 22px;height: 22px;flex-shrink: 0;}
		.addr-box .addr-info{align-items: center;}
		.addr-box .addr-info .top-box{font-size: 14px;color: #333333;align-items:center;}
		.addr-box .addr-info .top-box .phone{padding-left: 10px;box-sizing: border-box;}
		.addr-box .addr-info .address{font-size: 12px;color: #999999;padding-top:6px;box-sizing: border-box;word-wrap:break-word;padding-right:15px;box-sizing: border-box;}

		/*商品信息*/
		.order-list{width: 100%;margin-top: 10px;margin-bottom: 10px;}
		.order-list .order-one{width: 100%;background: #FFFFFF;}
		.order-list .order-one .order-top{height: 50px;width: 100%;align-items: center;padding: 0 15px;box-sizing: border-box;}
		.order-list .order-one .order-top .sta{color:#FF9502;}
		.order-list .order-one .order-conter{width: 100%;}
		.order-list .order-one .order-conter .order-shop{padding: 20px 15px;box-sizing: border-box;background: #FFFFFF;}
		.order-list .order-one .order-conter .order-shop .img-box{width: 92px;height: 92px;overflow: hidden;}
		.order-list .order-one .order-conter .order-shop .img-box img{width: 100%;display: block;}
		.order-list .order-one .order-conter .order-shop .shop-info{padding-left: 12px;box-sizing: border-box;position: relative;}
		.order-list .order-one .order-conter .order-shop .shop-info .name{font-size: 14px;color: #333333;line-height: 14px;}
		.order-list .order-one .order-conter .order-shop .shop-info .guige-box{align-items: center;color:#8E9194;font-size: 12px;padding-top: 18px;box-sizing: border-box;line-height: 14px;}
		.order-list .order-one .order-conter .order-shop .shop-info .guige-box .num{color: #333333;line-height: 14px;}
		.order-list .order-one .order-conter .order-shop .shop-info .price{width: 100%;align-items: center;padding-top: 22px;box-sizing: border-box;}
		.order-list .order-one .order-conter .order-shop .shop-info .price .p1{font-size: 18px;color: #FF9502;font-weight:bold;box-sizing: border-box;line-height: 20px;}
		.order-list .order-one .order-conter .order-shop .shop-info .price .p3{font-size: 18px;color: #FF9502;font-weight:bold;line-height: 20px;}
		.order-list .order-one .order-conter .order-shop .shop-info .price .p3 .t{font-size: 16px;line-height: 20px;}
		.order-list .order-one:nth-child(1)::before{display: none;}

		.order-list .order-one .tui-box{width: 64px;height: 20px;box-sizing: border-box;position: absolute;right: 0;bottom: 2px;}
		.order-list .order-one .tui-box .tui-btn{width: 64px;height: 20px;background: #FFFFFF;text-align: center;line-height:20px;color:#FF9502;font-size: 12px;}
		.order-list .order-one .tui-box .tui-btn::before{border-radius:8px;border-radius: 40px;border: 1px solid #FF9502;}

		/*订单价格信息*/
		.price-info{width: 100%;background: #FFFFFF;padding: 0 15px;box-sizing: border-box;margin-bottom: 10px;}
		.price-info .order-heji{width: 100%;height: 54px;align-items: center;justify-content: flex-end;}
		.price-info .order-heji .t1{font-size: 12px;color: #333333;}
		.price-info .order-heji .t2{font-size: 16px;color: #FF9502;font-weight: 700;}
		.price-info .info-one{align-items: center;height: 50px;}
		.price-info .info-one .l{font-size: 14px;color: #333333;}
		.price-info .info-one .r{font-size: 14px;color: #333333;text-align: right;padding-left: 10px;box-sizing: border-box;}
		.price-info .liuyan-box{width: 100%;padding: 15px 0 ;box-sizing: border-box;}
		.price-info .liuyan-box .text{font-size: 14px;color: #333333;flex-shrink: 0;padding-right: 10px;}
		.price-info .liuyan-box .content{font-size: 14px;color: #666666;word-break: break-word;}

		/*订单信息*/
		.order-info{width: 100%;background: #FFFFFF;padding:15px;box-sizing: border-box;margin-bottom: 10px;}
		.order-info .title{height: 18px;font-size: 16px;color: #333333;position: relative;top: 0;left: 0;line-height: 18px;padding-left: 10px;margin-bottom: 10px;}
		.order-info .title:after{display: block;content:"";width: 4px;height: 100%;background: #FF9502;position: absolute;top: 0;left: 0;}
		.order-info .info-one{align-items: center;height: 30px;}
		.order-info .info-one .l{font-size: 14px;color: #333333;}
		.order-info .info-one .r{font-size: 14px;color: #999999;padding-left: 10px;box-sizing: border-box;}

		/*底部按钮*/
		.order-bot{position: fixed;width: 100%;height: 54px;background: #FFFFFF;bottom: 0;left: 0;right: 0;z-index: 10;}
		.order-bot .btn-box{width: 100%;height: 100%;align-items: center;justify-content: flex-end;padding: 0 15px;box-sizing: border-box;}
		.order-bot .btn-box .btn{width:98px;height:34px;box-sizing: border-box;margin-left: 10px;border-radius:4px;background: #FF9502;text-align: center;line-height: 34px;color: #FFFFFF;}
		.order-bot .btn-box .price{align-items: center;}
		.order-bot .btn-box .price .text{font-size: 12px;}
		.order-bot .btn-box .price .p{font-size: 16px;font-weight: 700;}
		.order-bot .btn-box .btn.c{background: #FF9502;}
		.order-bot .btn-box .btn.l{margin-left: 0;}
		.order-bot .btn-box .btn.d{background: #FFFFFF;color:#999999;box-sizing: border-box;}
		.order-bot .btn-box .btn.d::before{border: 1px solid #CCCCCC;border-radius: 8px;}


	</style>
	<body>
		<div id="vue" class="warp">

			<!--订单头部-->
			<div class="sta-box flex" >
				<div class="t1" v-if="Pdata.status == 1">待付款</div>
				<div class="t1" v-if="Pdata.status == 2">等待发货</div>
				<div class="t1" v-if="Pdata.status == 3">卖家已发货</div>
				<div class="t1" v-if="Pdata.status == 4 || Pdata.status == 5">交易完成</div>
				<div class="t1" v-if="Pdata.status == 9">交易关闭</div>

				<div class="t2" v-if="Pdata.status == 1 && Pdata.endtype == 1">剩余<i id="over-time"></i><i v-if="Pdata.status == 1">自动关闭订单</i></div>
				<div class="t2" v-if="Pdata.status == 3 && Pdata.endtype == 1">剩余<i id="over-time"></i><i v-if="Pdata.status == 3">自动确认</i></div>
				<div class="t2" v-if="Pdata.status == 9" v-text="Pdata.closewhy"></div>

				<div class="sta-img" >
					<img  v-if="Pdata.status == 1" src="../../image/main3/order_bg1.png" >
					<img  v-if="Pdata.status == 2" src="../../image/main3/order_bg2.png" >
					<img  v-if="Pdata.status == 3" src="../../image/main3/order_bg3.png" >
					<img  v-if="Pdata.status == 4 || Pdata.status == 5" src="../../image/main3/order_bg4.png" >
					<img  v-if="Pdata.status == 9" src="../../image/main3/order_bg5.png" >
				</div>
			</div>

			<!--物流信息-->
			<div class="wuliu-box flex border-bottom" v-if="Pdata.status == 3" :data-id="Pdata.orderid" tapmode onclick="wuliuShow(this)">
				<div class="img-box flex">
					<img src="../../image/main3/wuliu_icon.png"/>
				</div>
				<div class="wuliu-info flex1" v-if="Pdata.wuliu">
					<div class="text han_2" v-text="Pdata.wuliu.context"></div>
					<div class="time" v-text="Pdata.wuliu.time"></div>
				</div>
				<div class="img2-box flex">
					<img src="../../image/main3/wuliu_back.png"/>
				</div>
			</div>

			<!--地址信息-->
			<div class="addr-box flex" v-if="Pdata.uname">
				<div class="img-box flex">
					<img src="../../image/main3/addr_icon.png"/>
				</div>
				<div class="addr-info flex1">
					<div class="top-box flex">
						<div class="name" v-text="Pdata.uname"></div>
						<div class="phone" v-text="Pdata.phone"></div>
					</div>
					<div class="address" v-text="Pdata.qustr + Pdata.dizhi"></div>
				</div>
			</div>

			<!--商品列表-->
			<div class="order-list">
				<div class="order-one border-top" v-for="(item,key) in Pdata.buydata">
					<div class="order-conter">
						<div class="order-shop flex">
							<div class="img-box border-all" :data-id="item.sid" tapmode onclick="open_goods(this);">
								<img :src="item.image"/>
							</div>
							<div class="shop-info flex1">
								<div class="name han_1" v-text="item.title"></div>
								<div class="guige-box flex">
									<div class="guige flex1 han_1" v-if="item.ggstr != null" v-text="item.ggstr"></div>
									<div class="guige flex1" v-if="item.ggstr == null"></div>
									<div class="num">x<i v-text="item.buynum"></i></div>
								</div>
								<div class="price flex">
									<div class="p1" v-text="'¥'+item.price"></div>
		    						<div class="p3" v-if="item.unscore">+<i v-text="item.unscore"></i><i class="t">积分</i></div>
								</div>
								<div class="tui-box flex" v-if="Pdata.status > 1 && Pdata.status < 9 && Pdata.outshsta != 1 || item.tui_sta > 0">
									<div class="tui-btn border-all" :style="{ display:(item.tui_sta == 0 ? '':'none')}" :data-id="item.id" tapmode onclick="openTuiShow(this)">申请售后</div>
									<div class="tui-btn border-all" :style="{ display:(item.tui_sta == 1 ? '':'none')}" :data-id="item.tui_oid" tapmode onclick="tuiOrderShow(this)">退款中</div>
									<div class="tui-btn border-all" :style="{ display:(item.tui_sta == 2 ? '':'none')}" :data-id="item.tui_oid" tapmode onclick="tuiOrderShow(this)">退款成功</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="price-info" style="margin-top:-10px;" v-if="Pdata.beizhu">
				<div class="liuyan-box flex border-top" v-if="Pdata.beizhu">
					<div class="text">留言</div>
					<div class="content flex1" v-text="Pdata.beizhu"></div>
				</div>
			</div>


			<!--价格信息-->
			<div class="price-info">
				<div class="info-one flex border-bottom">
					<div class="l">商品价格</div>
					<div class="r flex1">¥<i v-text="Pdata.items_price"></i></div>
				</div>
				<div class="info-one flex border-bottom">
					<div class="l">优惠券</div>
					<div class="r flex1">¥<i v-text="Pdata.youhui_price"></i></div>
				</div>
				<div class="info-one flex border-bottom">
					<div class="l">运费</div>
					<div class="r flex1" v-if="Pdata.unyunfei == 0">+¥<i v-text="Pdata.yunfei_price"></i></div>
	                <div class="r flex1" v-if="Pdata.unyunfei == 1">包邮</div>
				</div>
				<div class="info-one flex border-bottom">
					<div class="l">发票</div>
					<div class="r flex1 han_1">暂不支持开票</div>
				</div>
				<div class="info-one flex">
					<div class="l">实付款</div>
					<div class="r flex1">¥<i v-text="Pdata.pay_price"></i></div>
				</div>
			</div>

			<!--订单信息-->
			<div class="order-info">
				<div class="info-one flex">
					<div class="l">订单编号</div>
					<div class="r flex1" v-text="Pdata.orderid"></div>
				</div>
				<div class="info-one flex">
					<div class="l">创建时间</div>
					<div class="r flex1" v-text="Pdata.addtime"></div>
				</div>
				<div class="info-one flex" v-if="Pdata.payway">
					<div class="l">支付方式</div>
					<div class="r flex1" v-text="Pdata.payway"></div>
				</div>
				<div class="info-one flex" v-if="Pdata.paytime">
					<div class="l">付款时间</div>
					<div class="r flex1" v-text="Pdata.paytime"></div>
				</div>
				<div class="info-one flex" v-if="Pdata.kd_time">
					<div class="l">发货时间</div>
					<div class="r flex1" v-text="Pdata.kd_time"></div>
				</div>
				<div class="info-one flex" v-if="Pdata.oktime">
					<div class="l">成交时间</div>
					<div class="r flex1" v-text="Pdata.oktime"></div>
				</div>
			</div>

			<!--底部按钮-->
			<div class="fenge" style="width: 100%;height: 80px;"></div>
			<div class="order-bot sbx" id="app-footer">
				<!--待付款-->
				<div class="btn-box flex" :style="{ display:(Pdata.status == 1 ? '':'none')}">
					<div class="price flex flex1">
						<div class="text">实付款:</div>
						<div class="p">¥<i v-text="Pdata.pay_price"></i></div>
					</div>
					<div class="btn d border-all" :data-id="Pdata.orderid" tapmode onclick="quxiaoOrder(this)">取消订单</div>
					<div class="btn c" :data-id="Pdata.orderid" tapmode onclick="goPay(this)">立即付款</div>
				</div>

				<!--等待发货-->
				<div class="btn-box flex" :style="{ display:(Pdata.status == 2 ? '':'none')}">
					<div class="btn d border-all" tapmode onclick="gokefu(this)">联系客服</div>
				</div>

				<!--卖家已发货-->
				<div class="btn-box flex" :style="{ display:(Pdata.status == 3 ? '':'none')}">
					<div class="btn d border-all" tapmode onclick="gokefu(this)">联系客服</div>
					<div class="btn c" :data-id="Pdata.orderid" tapmode onclick="okOrder(this)">确认收货</div>
				</div>

				<!--交易完成-->
				<div class="btn-box flex" :style="{ display:(Pdata.status == 4 || Pdata.status == 5 ? '':'none')}">
					<div class="btn d l border-all" :data-id="Pdata.orderid" tapmode onclick="delOrder(this)">删除订单</div>
					<div class="btn d border-all" :data-id="Pdata.orderid" tapmode onclick="gokefu(this)">联系客服</div>
					<div class="btn d border-all" :data-id="Pdata.orderid" tapmode onclick="wuliuShow(this)">查看物流</div>
					<div class="btn" v-if="Pdata.status == 4" :data-id="Pdata.orderid" tapmode onclick="goPinJia(this)">评价</div>
					<div class="btn d border-all" v-if="Pdata.status == 5" :data-id="Pdata.orderid" tapmode onclick="goPinJiaShow(this)">查看评价</div>
				</div>

				<!--交易关闭-->
				<div class="btn-box flex" :style="{ display:(Pdata.status == 9 ? '':'none')}">
					<div class="btn d border-all" :data-id="Pdata.orderid" tapmode onclick="delOrder(this)">删除订单</div>
				</div>
			</div>

		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	lanYun.setFooter('app-footer');
	define(function (require, exports, module) {
		pageParam = api.pageParam;
		var dataInfo={};
		_page.getData = function(loading) {
			//console.log(pageParam.id);
			lanYun.getVueData({url:'UserOrder/show',get:{orderid:pageParam.id},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret));
				dataInfo = ret.data
				if(ret.errcode == 0){
					if(ret.data.status == 1 && ret.data.endtype == 1 && ret.data.endmiao > 0){
						countDown(ret.data.endmiao);
					}
					if(ret.data.status == 3 && ret.data.endtype == 1 && ret.data.endmiao > 0){
						countDown(ret.data.endmiao);
					}
				}
			});
		};

		lanYun.newVue('#vue',function() {
			_page.getData(1);
		});

		onShow = function () {
			var reshpage = lanYun.getStorage('reshpage');
			if(reshpage){
				lanYun.rmStorage('reshpage');
				intGetData();
			}
		}

		//去评价
		goPinJia = function (tis){
			var dst = tis.dataset;
			lanYun.openWin('main3/shop_pinjia.html', {
				title : '评价商品',
				frameParam : {id:dst.id}
			});
		}

		//查看售后订单
		tuiOrderShow = function (tis){
			var dst = tis.dataset;
			lanYun.openWin('ordert/tui_ordert_show.html', {
				title : '售后详情',
				frameParam : {id:dst.id}
			});
		}

		//打开申请售后
		openTuiShow = function (tis) {
			var dst = tis.dataset;
			lanYun.openWin('ordert/tui_ordert.html', {
				title:"申请售后",
				frameParam : {id:dst.id},
			});
		}

		//去支付订单
		goPay = function (tis){
			var dst = tis.dataset;
			lanYun.get('OrderPush/restPayOrder?orderid=' + dst.id ,function (ret) {
				lanYun.openWin('goods/pay/pay_sel.html', {
					title : '选择支付方式',
					border:'1',
					frameParam :{id:ret.orderid,price:ret.orderPayPrice,endmiao:ret.endmiao,buytype:'buyshop',endtype:ret.endtype},
				});
			},2)
		}

		//查看物流
		wuliuShow = function (tis){
			var dst = tis.dataset;
			lanYun.openWin('main3/wuliu_show.html', {
				title : '物流详情',
				frameParam : {id:dst.id}
			});
		}

		//取消订单
		quxiaoOrder = function (tis){
			var dst = tis.dataset;
			lanYun.alert({fname:'diaLogBox1',title:'提示', button:['取消','确定'],content: '您确定要取消订单吗？'},function(ret){
	            if (ret.index == 0) return;
				lanYun.get('UserOrder/close?orderid=' + dst.id ,function (ret){
					lanYun.toast(ret.msg);
					if(ret.errcode == 0){
						intGetData();
						lanYun.setStorage('reshpage',1);
						lanYun.event('uporderNum');
					}
				},2)
	        });
		}

		//确认订单
		okOrder = function (tis){
			var dst = tis.dataset;
			lanYun.alert({fname:'diaLogBox1',title:'提示', button:['取消','确定'],content: '您要确认收货吗？'},function(ret){
	            if (ret.index == 0) return;
				lanYun.get('UserOrder/orderok?orderid=' + dst.id ,function (ret){
					lanYun.toast(ret.msg);
					if(ret.errcode == 0){
						intGetData();
						lanYun.event('uporderNum');
					}
				},2)
	        });
		}

		//删除订单
		delOrder = function (tis){
			var dst = tis.dataset;
			lanYun.alert({fname:'diaLogBox1',title:'提示', button:['取消','确定'],content: '您确定要删除订单吗？'},function(ret){
	            if (ret.index == 0) return;
				lanYun.get('UserOrder/del?orderid=' + dst.id ,function (ret){
					lanYun.toast(ret.msg);
					if(ret.errcode == 0){
						lanYun.setStorage('reshpage',1);
						lanYun.event('uporderNum');
						api.closeWin();
					}
				},2)
	        });
		}

		//查看评价详情
		goPinJiaShow = function (tis) {
			lanYun.openWin('main3/my_pingjia.html', {
				title : '我的评价',
				menu:"<i style='color:#FF9502'>去评价</i>",
				frameParam : {}
			});
		}

		//打开拼团详情
		openTuanShow = function (tis) {
			var dst = tis.dataset;
			lanYun.openWin('goods/show/show_tuan.html', {
				title:"拼团详情",
				frameParam : {id:dst.id},
			});
		}

		//刷新列表
		intGetData = function () {
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(2);
		}

		//打开商品详情
		open_goods = function (tis) {
			var dst = tis.dataset;
			lanYun.openWin('goods/show', {
				win:'none',
				frameParam : dst,
			});
		}

		//倒计时
		function countDown(times) {
			var fun = function(){
				var day = 0,
					hour = 0,
					minute = 0,
					second = 0;//时间默认值
				if (times > 0) {
					day = Math.floor(times / (24 * 60 * 60));
					hour = Math.floor(times / (60 * 60)) - (day * 24);
					minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
					second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
				}
				if(day > 0){
					var time = day+'天'+hour+'小时'+minute+'分'+second+'秒';
				}
				if(hour > 0 && day <= 0){
					var time = hour+'小时'+minute+'分'+second+'秒';
				}
				if(minute > 0 && hour <= 0 && day <= 0){
					var time = minute+'分'+second+'秒';
				}
				if(second > 0 && minute <= 0 && hour <= 0 && day <= 0){
					var time = second+'秒';
				}
				$('#over-time').text(time);
				times--;
				if (times <= 0) {
					clearInterval(timer);
					setTimeout(function (){
						intGetData();
						lanYun.setStorage('reshpage',1);
						lanYun.event('uporderNum');
					}, 1000)
				}
			};
			fun();
			var timer = setInterval(function () {
				fun();
			}, 1000);
		}

		//去客服
		gokefu = function (){
			var udata = lanYun.getUdata();
			var avatar = lanYun.wurl+'static/logo.png';
			if(udata){
				avatar = udata.avatar;
			}
			var qiyuSdk = api.require('qiyuSdk');
			var params = {
				source:{
					sourceTitle:'天宏沐晨商城APP',
					sourceUrl:'',
					sourceCustomInfo:'来自订单详情'
				},
				commodityInfo:{
					commodityInfoTitle:"购买的订单为",
					commodityInfoDesc:dataInfo.orderid,
					pictureUrl:dataInfo.buydata[0]['image'],
					commodityInfoUrl:dataInfo.buydata[0]['image'], //链接地址
					note:'￥'+dataInfo.pay_price,
					show:true
				},
				sessionTitle:'天宏沐晨客服',
				groupId:0,
				staffId:0,
			}
			qiyuSdk.openServiceWindow(params);
			var prmUI = {
				showHeadImage:true,
				customerHeadImage:avatar //头像地址
			}
			qiyuSdk.setCustomUIConfig(prmUI);
		}

	});
</script>
